<template>
  <div class="">
    <!-- nav 开始 -->
    <div class="nav_bar">
      <div class="w1200 top_nav">
        <div class="left">
          <nuxt-link to="/login" class="a_link" v-if="!isLogin" rel="nofollow">登录/注册</nuxt-link>
          <div class="" v-else>
            <span>欢迎您，</span>
            <nuxt-link to="/my/center" class="a_link" rel="nofollow">{{
              userInfo.account || userInfo.phone
            }}</nuxt-link>
            <a href="javascript:void(0)" class="a_link" @click="logout" rel="nofollow">退出</a>
          </div>
          <el-popover placement="bottom" trigger="hover">
            <div class="big_qrcode">
              <img src="@/assets/images/qrcode.jpg" alt="二维码" />
            </div>
            <span class="name" slot="reference">哩哩官方微信</span>
          </el-popover>

        </div>
        <div class="right">
          <!-- <nuxt-link to="http://saas.lilikq.com/#/" class="a_link">机构中心</nuxt-link> -->
          <a href="http://saas.lilikq.com/#/" target="_blank" class="a_link" rel="nofollow">机构中心</a>
          <nuxt-link to="/contract" class="a_link" rel="nofollow">平台规则</nuxt-link>
          <el-divider direction="vertical"></el-divider>
          <span class="tel">客服电话：0755-23728316</span>
        </div>
      </div>
    </div>
    <!-- nav end -->
    <!-- 菜单 开始 -->
    <div class="nav_menu">
      <div class="w1200 inner">
        <div class="logo">
          <nuxt-link to="/home">
            <img src="@/assets/images/nav/logo@2x.png" alt="哩哩口腔" />
          </nuxt-link>
        </div>
        <div class="city" @click="chooseCity">
          <span>{{ city || "全国" }}</span>
          <i class="el-icon-arrow-down"></i>
        </div>
        <div class="menu_list">
          <a href="javascript:void(0)" class="a_link" :class="getMenus(item) ? 'a_link_active' : ''"
            v-for="(item, index) in menuList" :key="`menu_${index}`" @click="menuEvent(item)">{{ item.name }}</a>
        </div>

        <div class="search">
          <input type="text" ref="searchInput" v-model="term" class="a_input" placeholder="种牙哪里好？" />
          <nuxt-link :to="getPath()" class="btn"><i class="el-icon-search"></i></nuxt-link>
          <!-- <button class="btn" @click="goSearch">
            <i class="el-icon-search"></i>
          </button> -->
        </div>
      </div>
    </div>
    <!-- 菜单 end -->
  </div>
</template>
<script>
import { Divider, Popover } from "element-ui";
import { LOGOUT_BY_PASSWORD } from "@/http/interface";
import { showModal } from "@/utils/utils";
import qs from 'qs'
export default {
  name: "NavBar",
  components: {
    [Divider.name]: Divider,
    [Popover.name]: Popover,
  },
  data() {
    return {
      active: "",
      menuList: [
        { name: "首页", id: 1, url: "home" },
        { name: "医院", id: 2, url: "hospital" },
        { name: "医生", id: 3, url: "doctor" },
        { name: "商城", id: 4, url: "shop" },
        { name: "百科", id: 5, url: "baike" },
        { name: "资讯", id: 6, url: "news" },
        { name: "问答", id: 7, url: "question" },
        { name: "报告", id: 8, url: "report" },
        { name: "查资质", id: 9, url: "certification" },
      ],
      term: "",
      inputFocus: false,
      city: "",
      userInfo: {},
    };
  },
  watch: {
    $route: {
      handler: function (n) {
        let o = this.$cookies.getAll();
        this.city = this.$cookies.get("city");
        this.isLogin = o.token;
        this.userInfo = o.user;
      },
      immediate: true,
    },
  },
  created() {
    //console.log(this.$cookies.get('city'))
    this.city = this.$cookies.get("city");
  },
  methods: {
    // 菜单点击事件
    menuEvent(row) {
      this.active = row.id;
      let query = {};
      this.$router.push({
        path: `/${row.url}`,
        query: {
          ...query,
        },
      });
    },

    // 去搜索
    goSearch() {
      let ids = [2, 3, 4, 6, 7];
      let id = this.active;
      let query = {};
      let term = this.term;
      if (!term) {
        this.$refs.searchInput.focus();
        return false;
      }
      query.term = term;
      query.sid = id;
      if (!ids.includes(id)) {
        query.sid = 2;
      }
      // let _path = `/search?${qs.stringify(query)}`
      // window.location.replace(_path)

      this.$routerReplace(query);
    },

    // 选择城市
    chooseCity() {
      this.$routerPush("/city", {});
    },

    // 退出登录
    logout() {
      let _this = this;
      showModal({
        title: "提示",
        message: "确定退出登录吗？",
        showCancelButton: true,
        success: function () {
          _this.$axios.get(LOGOUT_BY_PASSWORD).then((res) => {
            if (res.code == 200) {
              _this.$cookies.remove("token");
              _this.$cookies.remove("user");
              _this.$cookies.remove("userInfo");
              _this.$router.push({ path: "/login" });
            }
          });
        },
      });
    },

    // 获取当前选中的菜单
    getMenus(item) {
      let _path = this.$route.path
      let isCurrent = _path.includes(item.url)
      return isCurrent
    },

    // 获取参数
    getPath() {
      let ids = [2, 3, 4, 6, 7];
      let id = this.active;
      let query = {};
      let term = this.term;
      // if (!term) {
      //   this.$refs.searchInput.focus();
      //   return false;
      // }
      query.term = term;
      query.sid = id;
      if (!ids.includes(id)) {
        query.sid = 2;
      }
      let _path = `/search?${qs.stringify(query)}`
      return _path;
    }

  },
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>